<script setup lang="ts">
import { WebsiteInfoModel, ProjectCarouselModel } from "@/api/webSite/response";
import { onMounted, reactive, ref } from "vue";
import { PostCatrgoryModel, PostModel } from "@/api/post/response";
import useElementPlusStore from '@/stores/UseElementPlusStore';
import { GetPostesApiRequest } from "@/api/post/request";
import { getWebInfoApi } from "@/api/webSite"
import { getPostCategoriesApi, getPostesApi } from "@/api/post"

//生成随机颜色
function getRandomColor(alpha = 1) {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

//生成随机数
function getRandomValue() {
  return Math.floor(Math.random() * (30 - 10 + 1)) + 10;
}

const webInfo = reactive({} as WebsiteInfoModel);
const postCategories = reactive<Array<PostCatrgoryModel>>([]);
const postes = ref<Array<PostModel>>([]);
onMounted(async () => {
  Object.assign(webInfo, await getWebInfoApi());
  Object.assign(postCategories, await getPostCategoriesApi());
  await getPostes();

  useElementPlusStore().closeLoad();
})

async function getPostes(arg: string = "") {
  postes.value = await getPostesApi(new GetPostesApiRequest(arg));
}

async function switchCategory(data: GetPostesApiRequest) {
  await getPostes(data.category);
}

const projectCarousels = reactive(ProjectCarouselModel.Init());

</script>

<template>
  <div class="main">
    <div class="bubbles">
      <span :style="{
        '--i': getRandomValue(),
        'background-color': getRandomColor(),
        'box-shadow': `0 0 0 10px ${getRandomColor(0.25)}44, 0 0 50px ${getRandomColor()}, 0 0 100px ${getRandomColor()}`
      }" v-for="item in 45" :key="item"></span>
    </div>
    <div class="content">
      <div class="header">
        <div class="header_left">
          <projectCarousel :projectCarousels="projectCarousels"></projectCarousel>
        </div>
        <div class="header_right">
          <websiteInfoCard :webInfo="webInfo"></websiteInfoCard>
        </div>
      </div>
      <div class="body">
        <div class="postcategory">
          <postCategoryButton @switchCategory="switchCategory" :categories="postCategories"></postCategoryButton>
        </div>
        <div class="post">
          <postCard v-for="item in postes" :key="item.id" :post="item"></postCard>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@keyframes animate {
  0% {
    transform: translateY(10vh) scale(0);
  }

  100% {
    transform: translateY(-100vh) scale(1);
  }
}

.main {
  position: relative;
  width: 100%;
  background-color: $bgColor;

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $bgColor;

    .header {
      width: 90%;
      height: 600px;
      display: flex;
      flex-direction: row;
      margin-top: 30px;
      box-shadow: 0 0 15px rgba(128, 128, 128, 0.7);
      border-radius: 8px;

      .header_left {
        flex: 2;
        display: flex;
      }

      .header_right {
        flex: 1;
      }
    }

    .body {
      margin-top: 30px;
      width: 90%;
      display: flex;
      flex-direction: column;

      .postcategory {
        height: 70px;
        padding-left: 50px;
      }

    }
  }

  .bubbles {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    span {
      width: 30px;
      height: 30px;
      background-color: #4fc3dc;
      margin: 0 4px;
      border-radius: 50%;
      box-shadow: 0 0 0 10px #dfc3dc44,
        0 0 50px #4fc3dc,
        0 0 100px #4fc3dc;
      animation: animate calc(120s / var(--i)) linear infinite;

      &:nth-child(even) {
        background-color: #ff2d75;
        box-shadow: 0 0 0 10px #ff2d7544,
          0 0 50px #ff2d75,
          0 0 100px #be1e56;
      }
    }
  }
}
</style>
